<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { useUserStore } from '@/store/user';
import { LoginData } from '@/api/types';
import { to } from 'await-to-js';
import router from '@/router/index'
import '@styles/login.css'
const userStore = useUserStore();

const loginForm = ref<LoginData>({
  tenantId: '000000',
  phonenumber: '',
  password: '',
  rememberMe: false,
  code: '',
  uuid: ''
} as LoginData);


const handleLogin = async () => {
  if (loginForm.value.phonenumber!=''&&loginForm.value.password!='') {
    // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
    if (loginForm.value.rememberMe) {
      localStorage.setItem("tenantId", String(loginForm.value.tenantId));
      localStorage.setItem('phonenumber', String(loginForm.value.phonenumber));
      localStorage.setItem('password', String(loginForm.value.password));
      localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
    } else {
      // 否则移除
      localStorage.removeItem("tenantId");
      localStorage.removeItem('phonenumber');
      localStorage.removeItem('password');
      localStorage.removeItem('rememberMe');
    }
    // 调用action的登录方法
    const [err] = await to(userStore.login(loginForm.value));
    if (!err) {
      await router.push("/home");
    }
  } else {
    console.log('error submit!', fields);
  }
};

const errorflage = ref<boolean>(false)
const checkPhone = () => {
  var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
  if (!myreg.test(loginForm.value.phonenumber)) {
      errorflage.value = true
  } else {
      errorflage.value = false
  }
}

const gotoAgree = (type) => {
  let isUser
  if (type == 'user') {
    isUser = true
  } else {
    isUser = false
  }
  const c = router.resolve({
    path: "/agreement",
    query: {  isUserAgree: isUser }
  });
  window.open(c.href, "_blank");
}

const getLoginData = () => {
  // const tenantId = localStorage.getItem("tenantId");
  const tenantId = '000000'
  const phonenumber = localStorage.getItem('phonenumber');
  const password = localStorage.getItem('password');
  const rememberMe = localStorage.getItem('rememberMe');
  loginForm.value = {
    tenantId: tenantId === null ? String(loginForm.value.tenantId) : tenantId,
    phonenumber: phonenumber === null ? String(loginForm.value.phonenumber) : phonenumber,
    password: password === null ? String(loginForm.value.password) : String(password),
    rememberMe: rememberMe === null ? false : Boolean(rememberMe)
  } as LoginData;
}

onMounted(() => {
  getLoginData();
});
</script>

<template>
  <div class="loginBG">
    <div class="login_box"></div>
    <div class="login_box-content">
      <!-- <div class="login_logo"><span>L</span>IDU</div> -->
      <div class="login_logo">家庭农场</div>
      <div class="login_title" style="margin-left: 40px;">信息管理系统</div>
      <form>
        <div class="Tabs">
          <div class="tabsHeader"></div>
          <div class="zh">
            <div class="user-box">
              <label for="">手机号</label>
              <input :class="loginForm.phonenumber!=''?'active':''" name="phone" type="text" v-model="loginForm.phonenumber" @blur="checkPhone" autocomplete="off">
              <div v-show="errorflage" style="font-size: 12px;color: #ff0000;">* 您的手机号码格式错误，请检查后重新提交。</div>
            </div>
            <div class="user-box">
              <label for="">密码</label>
              <input :class="loginForm.password!=''?'active':''" name="password" type="password" v-model="loginForm.password" @keyup.enter.native="handleLogin" autocomplete="new-password">
            </div>

            <div class="tooltip_box-login" @click="loginForm.rememberMe = !loginForm.rememberMe">
              <label class="container">
                <input type="checkbox" :checked="loginForm.rememberMe" @click="loginForm.rememberMe = !loginForm.rememberMe">
                <svg viewBox="0 0 64 64" height="1rem" width="1rem">
                  <path d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16" pathLength="575.0541381835938" class="path"></path>
                </svg>
              </label>
              <span :class="loginForm.rememberMe?'rememberActive':''">记住密码</span>
            </div>
          </div>
        </div>
      </form>
      <div class="login_footer">
        <button class="login_btn" @click="handleLogin">登录</button>
      </div>
      <div class="footer_agreement">
        <!-- <span></span>登录或完成注册即代表你同意<span @click="gotoAgree('user')">用户协议</span>和<span @click="gotoAgree('privacy')">隐私协议</span> -->
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
